<template>

    <el-menu active-text-color="#ffd04b" :collapse="store1.isMenuCollapse" background-color="#545c64" class="el-menu-vertical-demo"
        :default-active="$route.path" :router="true" text-color="#fff">

        <template v-for="item1 in $router.options.routes">

            <!-- 处理只有一级菜单 -->
            <el-menu-item :index="item1.path" v-if="item1.children == undefined && item1.meta.show != false">
                <el-icon> <component :is="item1.meta.icon" class="icon" /></el-icon>
                <span>{{ item1.meta.title }}</span>
            </el-menu-item>

            <!-- 处理含有二级菜单 -->

            <el-sub-menu :index="item1.path" v-if="item1.children != undefined && item1.meta.show != false">
                <template #title>
                    <el-icon><component :is="item1.meta.icon" class="icon" /></el-icon>
                    <span>{{ item1.meta.title }}</span>
                </template>

                <template v-for="item2 in item1.children ">
                    <el-menu-item v-if="item2.meta.show != false" :index="item2.path">
                        <component :is="item2.meta.icon" class="icon" />
                        {{ item2.meta.title }}
                    </el-menu-item>
                </template>


            </el-sub-menu>

        </template>


    </el-menu>
    <div class="optionIcon">
        <component :is="optionIcon" class="icon" @click="openOrClose" />
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import  useStore1 from '@/store/store1'
const store1 = useStore1()
const optionIcon = ref('Fold') //Expand
const openOrClose = () => {
    optionIcon.value = optionIcon.value == "Fold" ? "Expand" : "Fold"
    store1.isMenuCollapse = !store1.isMenuCollapse
}


</script>
<style scoped>
.optionIcon {
    text-align: center;
    color: white;
     cursor: pointer;
}

.icon {
    width: 16px;
    height: 16px;
    padding-right: 4px;
}

.el-menu {
    border-right: 0px
}




.el-menu-vertical-demo:not(.el-menu--collapse){
   min-height: calc(100vh - 90px);
   width: 200px;
}

.el-menu--collapse {
    /*屏幕高度的占比 */
    min-height: calc(100vh - 90px);
}

</style>